const {resolve}= require('path')
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const MiniCssExtractPlugin=require('mini-css-extract-plugin')
//webpack5压缩css
const CssMinimizerWebpackPlugin=require('css-minimizer-webpack-plugin')
//webpack4压缩css
// const OptimizeCssAssets-webpack-plugin=require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin =require('html-webpack-plugin')
//webpack5 eslint  npm i eslint-webpack-plugin eslint -D
const EslintWebpackPlugin=require('eslint-webpack-plugin')

//默认以生产环境的配置为准 包括package.json里的 此处者设置为development 打包的时候插件会自动打包环境对本地样式文件进行兼容性补充
process.env.NODE_ENV='development'
module.exports = {
    //webpack只能处理js/json格式的文件
    entry: './js/server1.js',
    output: {
        filename: "js/[name].[contentHash:10].js",
        //本js文件所在的绝对路径
        path:resolve(__dirname,'build')
    },
    //样式类文件需要用loader
    module:{
        rules:[
            // {
                // //webpack4 eslint
                // //1.下载依赖 eslint-loader eslint
                // //2.下载官方风格格式化库 eslint-config-airbnb-base eslint-plugin-import eslint
                // //3.package.json里添加配置
                // //  "eslintConfig": {
                //    "extends": ["airbnb"]
                //  }
                // test:/\.js$/,
                // exclude:/node_module/,
                // loader:'eslint-loader',
                // option:{
                 // fix:true
                 // }
            // },
            //webpack 5
            // 1.先下载npm install babel-loader @babel/core @babel/preset-env
            // 2.新增babel.config.js 在里面添加配置
            //webpack4 babel 45下载的依赖一样的版本不一样
            //方法1.如下npm install babel-loader @babel/core @babel/preset-env
            // {
            //   test:/\.js$/,
            //   exclude:/node_module/,
            //   loader:'babel-loader',
            //   options:{
            //       presets:['@babel/preset-env'],
            //       cacheDirectory:true//生产环境js语法兼容使用缓存
            //   }
            // },
            //方法2，按需引入
            // {
            //   test:/\.js$/,
            //   exclude:/node_module/,
            //   loader:'babel-loader',
            //   options:{
            //       presets:[
            //       '@babel/preset-env',
            //       {
            //        按需加载
            //       useBuiltIns:'usage',
            //       corejs:{
            //        version:3
            //       },
            //       targets:{
            //       chrome:'60',
            //       firefox:'60'
            //       }
            //       }
            //       ]
            //   }
            // },
            //方法3.npm install @babel/polyfill
            //哪个就是要用就在哪里引入 全量的语法兼容代码容量太大
            //匹配less类型文件从右到左less预处理为css 将css编译成commonjs里的js样式字符串 将样式js插入到入口文件的style标签里
            {
                test:/\.(less|css)$/i,
                use:[
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader',
                    //css兼容性处理 通过插件对package.json里的browerlist的配置进行兼容性处理
                    //下载  npm install postcss-loader postcss postcss-preset-env --save-dev
                    {
                        loader:'postcss-loader',
                        options:{
                            //webpack4
                            // ident:'postcss',
                            // plugins: [
                            //     require('postcss-preset-env')
                            // ]
                            //webpack5 npm install --save-dev postcss-loader autoprefixer
                            // getPostcssOptions:{
                            //     plugins: ['postcss-preset-env']
                            // }
                            postcssOptions:{
                                plugins: [
                                    [
                                        'autoprefixer',
                                        {
                                            overrideBrowserslist: ['> 0.15% in CN', 'last 2 versions'],
                                        },
                                    ],
                                ],
                            }
                        }
                    }
                ]
            },
            // {
            //     test:/\.(png|jpg|gif)$/,
            //     loader:'url-loader',
            //     //图片大小为8kb,重命名生成的hash长度限制为10且后缀使用原来的
            //     options: {
            //         limit:8*1024,
            //         name:'[hash:10].[ext]',
            //         esModule:false//这个会和下面的html-loader冲突因为url-loader使用的es6模块化 后者使用的commonjs
            //     }
            // },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                type: "asset",
                generator: {
                    filename: "static/img/[hash:6][ext]"
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 100 * 1024    //(表示100kb以下的文件转换成base64编码)
                    }
                }
            },
            //处理html里面引入的图片
            {
                test:/\.html$/,
                loader:'html-loader',
            },
            //webpack5以后的配置有变化具体参考https://www.cnblogs.com/yaopengfei/p/15304706.html
            {
                test: /\.(ttf|woff|woff2)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'static/font/[contentHash:10][ext][query]'
                }
            },
            //处理字体图标文件
            {
                exclude:/\.(html|js|png|jpg|gif|less|css|ttf|woff|woff2)$/,
                loader:'file-loader'
            },
        ],
    },
    //打包html会将所有资源文件自动引入
    plugins:[
        new HtmlWebpackPlugin({
            template: "./index.html",
            minify:{
                //移除空格注释
                collapseWhitespace:true,
                removeComments:true
            }
        }),
        //自动删除之前的打包文件目录
        new CleanWebpackPlugin(),
        //代替style-loader
        new MiniCssExtractPlugin({
            filename:'css/[name].[contentHash:10].css'
        }),
        //指定检查哪个目录下的文件
        new EslintWebpackPlugin({
            context:resolve(__dirname,'js')
        })
    ],
    optimization: {
        splitChunks:{
            //分包：把node_modules单独打包成一个文件 对多入口文件的公共文件提取出来单独打包成一个
            chunks: "all"
        }
    },
    //本地内存运行打包服务器npm install webpack-dev-server -D npx webpack-dev-server
    devServer: {
        //webpack 5
        static:{
          directory:resolve(__dirname,'build')
        },
      //webpack 4
     // contentBase:resolve(__dirname,'build'),
     compress:true,
     host:'localhost',
     port:'8080',
     open:true,
     hot:true//热模块替换  谁更新了就重新打包谁
    },
    //mode:'production' 生产环境可以自动压缩js
    mode:'development'
}
